<template>
  <div class="shop-cart-page">
    <nav-bar>
      <template v-slot:default>购物车(0)</template>
    </nav-bar>
    <div class="shop-cart-body" v-if="state.data.length" >
      <van-checkbox-group v-model="state.checked" @change="changeGroup">
        <van-swipe-cell v-for="item in state.data" :key="item.id" :right-width="50">
          <div class="shop-cart-item">
            <van-checkbox :name="item.id"/>
            <van-image width="80" height="100" :src="item.goods.cover_url"/>
            <div class="shop-cart-title">
              <div>{{ item.goods.title }}</div>
              <div class="shop-cart-price">￥{{ item.goods.price }}.00</div>
            </div>
            <div class="shop-cart-desc">
              <div><span>仅剩&nbsp;&nbsp;</span>{{ item.goods.stock }}</div>
              <div class="shop-cart-operation">
                <van-stepper v-model="item.num" :min="1" :max="item.goods.stock" @change="onChange" :name="item.id" integer/>
              </div>
            </div>
          </div>
          <template #right>
            <van-button square type="danger" icon="delete" class="delete-button" @click="deleteCart(item.id)"/>
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>
    <div class="empty" v-else>
      <div class="empty-content">
        <img
            class="empty-cart"
            src="@/assets/images/empty-car.png"
            alt="空购物车"
        />
        <div class="title">购物车空空如也</div>
        <van-button round color="#1baeae" type="primary" block @click="goTo">前往选购</van-button>
      </div>
    </div>
    <van-submit-bar class="all-select" :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>


</template>

<script setup lang="ts">
import NavBar from "@/components/common/navbar/NavBar.vue";
import {useRouter} from "vue-router";
import {computed, onMounted, ref} from "vue";
import {getCartList, deleteShopCart, changeShopCartCount, changeShopCartChecked} from "@/network/shopcart";

import {state} from "@/views/shopcart/state";
import {closeToast, showFailToast, showLoadingToast} from "vant";

const allChecked = ref(false);
const router = useRouter();
function onSubmit() {
    if(state.checked.length === 0){
      showFailToast('未选择商品');
    }else{
      router.push('/create/order')
    }
}

function goTo() {
  router.push({path: "/category"});
}

onMounted(() => {
  getShopCartList();
});
function getShopCartList() {
  showLoadingToast({message:'加载中...',forbidClick:true})
  getCartList(true).then((res) => {
    state.data = res.data;
    state.checked = state.data.filter((item) => item.is_checked).map((item)=> item.id)
    allChecked.value =(state.data.length === state.checked.length);
    closeToast();
  });
}
function deleteCart(id:string) {
  deleteShopCart(id).then((res) => {
      if(res.status === 204){
        getShopCartList();
      }
  })
}

function onChange(value:string, detail:{name:string}) {
  showLoadingToast({message:'加载中...',forbidClick:true})
  const cartId = detail.name;
  const num = value;
  changeShopCartCount(cartId, {num}).then((res)=> {
    console.log(res);
    if(res.status === 204){
      getShopCartList();
    }
  })
}

function changeGroup(names:number[]) {
  console.log(names)
  allChecked.value = (state.data.length === names.length);
  const cartIds = names;

  changeShopCartChecked({cart_ids:cartIds}).then((res)=> {
    console.log(res);
  })
}

const totalPrice = computed(()=>{
  let total= 0;
  state.data.filter((item) => state.checked.includes(item.id)).forEach(( item)=> {
    total += item.goods.price * item.num;
  })
  return total*100;
})
</script>

<style lang="scss" scoped>
.shop-cart-page {
  margin-top: 48px;
  margin-bottom: 60px;

  .shop-cart-body{
    margin-bottom: 120px;
    .shop-cart-item {
      display: flex;
      align-items: center;
      margin: 10px;
      font-size: 18px;

      .shop-cart-title {
        flex: 1;
        margin: 0 10px;
        text-align: left;

        .shop-cart-price {
          margin-top: 10px;
          font-size: 16px;
          color: red;
        }
      }

      .shop-cart-desc {
        text-align: right;

        .shop-cart-operation {
          margin-top: 20px;
        }
      }
    }

    .delete-button {
      width: 50px;
      height: 100%;
    }
  }



  .empty {
    margin-top: 200px;
    margin-left: 10px;
    margin-right: 10px;
    height: 100%;
    display: flex;
    align-items: center;

    .empty-content {

      .empty-cart {
        width: 50%;
        height: auto;
      }
    }
  }
}

.all-select {
  margin-bottom: 64px;
}
</style>